import { message } from 'ant-design-vue';
import * as vscode from 'vscode';

export class SidebarProvider implements vscode.WebviewViewProvider {
    private _context: vscode.ExtensionContext;
    private _view?: vscode.WebviewView;
    constructor(context: vscode.ExtensionContext) {
        this._context = context;
    }
    public resolveWebviewView(webviewView: vscode.WebviewView) {
        this._view = webviewView;
        this._view.webview.options = {
            enableScripts: true,
            localResourceRoots: [this._context?.extensionUri]
        };

        this._view.webview.html = this._getHtmlForWebview(this._view.webview);
        this._view.webview.onDidReceiveMessage((message) => {
            const editor = vscode.window.activeTextEditor;
            if (editor) {
                
                editor.edit(editBuilder => {
                    editBuilder.insert(editor.selection.active, message.data);
                });
            }
            console.log('1111=======', message);
        })

    }
    // 发送消息给 Webview 中的 iframe 页面
    public postMessageToWebview(message: any) {
        if (this._view) {
            this._view.webview.postMessage(message);
        }
    }

    private _getHtmlForWebview(webview: vscode.Webview) {
        return `<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Sidebar</title>
            <script>
            var vscode = acquireVsCodeApi();
            </script>
            <style>
                body, iframe { padding: 0; margin: 0; }
                #root {
                    width: 100%;
                    height: calc(100vh - 10px);
                }
                iframe {
                    width: 100%;
                    height: 100%;
                    border: none;
                }
            </style>
        </head>
        <body>
            <div id="root">
                
                <iframe id="externalFrame" allow="clipboard-read; clipboard-write" src="http://localhost:5173/"></iframe>
            </div>
            <script>
               
                window.addEventListener('message', event => {
                    const message = event.data;
                    console.log('Received message from extension:', message);
                    // 在此处处理来自扩展的消息
                    if(message.command === 'vue-to-vscode'){
                        sendMessageToVscode(message)
                    }else{
                        sendMessageToIframe(message);
                    }
                   
                });
                
                // 向 iframe 发送消息
                function sendMessageToIframe(message) {
                    var iframe = document.getElementById('externalFrame');
                    iframe.contentWindow.postMessage(message, 'http://localhost:5173/');
                }
                // 向 vscode 发送消息
                function sendMessageToVscode(message) {
                    vscode.postMessage(message);
                 }
            </script>
        </body>
        </html>`;
    }
}
